﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基于WEUI的多级联动</title>

    <link rel="stylesheet" href="http://libs.cdnjs.net/weui/1.1.2/style/weui.min.css" />
    <link rel="stylesheet" href="http://libs.cdnjs.net/jquery-weui/1.0.1/css/jquery-weui.min.css" />
    <script src="http://libs.cdnjs.net/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://libs.cdnjs.net/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>

    <script type="text/javascript" src="linkageData.js"></script>
    <script type="text/javascript" src="Linkage.js"></script>
</head>
<body>
    <div class="main">
        <header style="text-align:center;color:#009688">
            <h1>多级联动演示  </h1>
        </header>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">城市</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" id="area" />
                </div>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">医院</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="hospital" />
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">科室</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="department" />
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <a class="weui-btn weui-btn_primary" href="javascript:;" id="show">查看</a>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $.showLoading("加载中");
            //初始化联动
            Linkage.init({
                elms: [
                    { $elm: $("#area"), text: "城市" },
                    { $elm: $("#hospital"), text: "医院" },
                    { $elm: $("#department"), text: "科室", multi: true }//multi为多选，默认单选
                ],
                linkageData: linkageData,//数据，详细见linkageData.js
                level: 3                //层次等级，目前只支持3与2级
            })
            $.hideLoading("数据加载失败，请刷新页面后重试!");
            //显示值
            $("#show").click(function () {
                var resultText = "";
                var resultValue = "";
                $.each($(".weui-input"), function () {
                    resultText += $(this).val() + " ";
                    resultValue += $(this).data("values") + " ";
                });
                $.toast(resultText+"\n" + resultValue, "text")
            });
        });

    </script>
</body>

</html>
